<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 顶部导航栏 -->
    <nav class="bg-brew-dark">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <span class="text-2xl font-bold text-brew-amber">BrewMama</span>
            </div>
            <div class="hidden md:block">
              <div class="ml-10 flex items-baseline space-x-4">
                <router-link
                  v-for="item in navigation"
                  :key="item.name"
                  :to="{ name: item.route }"
                  class="px-3 py-2 rounded-md text-sm font-medium"
                  :class="[isActive(item.route) 
                    ? 'bg-brew-amber text-white' 
                    : 'text-gray-300 hover:bg-gray-700 hover:text-white']"
                >
                  <component 
                    :is="item.icon" 
                    class="inline-block h-5 w-5 mr-2" 
                    aria-hidden="true" 
                  />
                  {{ item.name }}
                </router-link>
              </div>
            </div>
          </div>
          
          <!-- 移动端菜单按钮 -->
          <div class="md:hidden">
            <button
              type="button"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
              @click="sidebarOpen = true"
            >
              <span class="sr-only">打开菜单</span>
              <Bars3Icon class="h-6 w-6" />
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 移动端侧边菜单 -->
    <div 
      class="fixed inset-0 z-40 md:hidden"
      :class="sidebarOpen ? 'block' : 'hidden'"
    >
      <!-- 背景遮罩 -->
      <div 
        class="fixed inset-0 bg-gray-600 bg-opacity-75"
        @click="sidebarOpen = false"
      ></div>

      <div class="relative flex-1 flex flex-col max-w-xs w-full bg-brew-dark transform transition-transform ease-in-out duration-300">
        <div class="absolute top-0 right-0 -mr-12 pt-2">
          <button
            type="button"
            class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
            @click="sidebarOpen = false"
          >
            <span class="sr-only">关闭菜单</span>
            <XMarkIcon class="h-6 w-6 text-white" />
          </button>
        </div>
        
        <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
          <div class="flex-shrink-0 flex items-center px-4">
            <span class="text-2xl font-bold text-brew-amber">BrewMama</span>
          </div>
          <nav class="mt-5 px-2 space-y-1">
            <router-link
              v-for="item in navigation"
              :key="item.name"
              :to="{ name: item.route }"
              class="group flex items-center px-2 py-2 text-base font-medium rounded-md w-full"
              :class="[isActive(item.route) 
                ? 'bg-brew-amber text-white' 
                : 'text-gray-300 hover:bg-gray-700 hover:text-white']"
              @click="sidebarOpen = false"
            >
              <component 
                :is="item.icon" 
                class="mr-4 flex-shrink-0 h-6 w-6" 
                aria-hidden="true" 
              />
              {{ item.name }}
            </router-link>
          </nav>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <main class="py-6">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { 
  HomeIcon, 
  BeakerIcon, 
  ClipboardDocumentListIcon, 
  ArchiveBoxIcon, 
  Cog6ToothIcon,
  Bars3Icon,
  XMarkIcon,
  WrenchScrewdriverIcon
} from '@heroicons/vue/24/outline'

const route = useRoute()
const sidebarOpen = ref(false)

const navigation = [
  { name: '仪表盘', route: 'dashboard', icon: HomeIcon },
  { name: '配方', route: 'recipes', icon: ClipboardDocumentListIcon },
  { name: '酿造', route: 'brewing', icon: BeakerIcon },
  { name: '酿造工具', route: 'tools', icon: WrenchScrewdriverIcon },
  { name: '库存', route: 'inventory', icon: ArchiveBoxIcon },
  { name: '设置', route: 'settings', icon: Cog6ToothIcon },
]

const isActive = (routeName) => {
  return route.name === routeName || 
         (routeName === 'recipes' && route.name === 'recipe-detail')
}
</script> 